import React from 'react';
import {TimePicker,Select,Button, Input, Spin, DatePicker,Icon,TreeSelect,Modal,message} from 'antd';
import styles from './AddItem.less';
import {VtxModalList, VtxModal, VtxDatePicker} from 'vtx-ui';
import {NAME_SPACE, AddForm} from './config'

const Option = Select.Option;

class Index extends React.Component{
  constructor(props){
    super(props)
    this.hideHandle = this.hideHandle.bind(this)
    this.submitHandle = this.submitHandle.bind(this)
    this.valueChange = this.valueChange.bind(this)
  };
  hideHandle(){
    const {dispatch} = this.props 
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        addModelVisable: false,
      }
    })
  };
  submitHandle(){
    const {dispatch, modifyId, addForm} = this.props;
    this.lis.submit().then(res => {
        if (res) {
            if (modifyId) {
                dispatch({
                    type: `${NAME_SPACE}/_modfiy`,
                })
            } else {
                dispatch({
                    type: `${NAME_SPACE}/add`
                })
                dispatch({
                  type: `${NAME_SPACE}/updateState`,
                  payload: {
                    addModelVisable: false
                  }
                })
            }
        }
    });
  };
  valueChange(name, value){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'addForm',
        data: {
          [name]: value
        }
      }
    })
  };
  render(){ 
    const {dispatch, addModelVisable, addForm, modifyId} = this.props

    const {
      linkPhone,
      // 	登录名
      loginName,
      // 登录类型
      loginType,
      // 密码
      passWord,
      // 账号状态
      status,
      // 名称
      userName,
    } = addForm

    const modalProps = {
      footer: [
        <Button key="back" onClick={this.hideHandle}>取消</Button>,
        <Button key="ok" type="primary" onClick={this.submitHandle}>确定</Button>,
      ],
      onCancel: this.hideHandle,
      onOk: this.submitHandle,
      maskClosable: false,
      title: '新增',
      visible: addModelVisable,
      width: 600,
    }
    return(
      <div>
        <VtxModal {...modalProps}>
          <div>
            <VtxModalList
              ref={(lis) => {this.lis = lis}}
              visible={addModelVisable}
              isRequired={true}
            >
              <Input
                value = {userName}
                onChange={(e) =>{
                    this.valueChange("userName", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '作业人员',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: userName,
                  }
                }}
              />
              <Input
                value = {linkPhone}
                onChange={(e) =>{
                    this.valueChange("linkPhone", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '手机号',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: linkPhone,
                    exp: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
                  }
                }}
              />
              <Input
                value = {loginName}
                onChange={(e) =>{
                    this.valueChange("loginName", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '小程序账号名称',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: loginName,
                  }
                }}
              />
              <Input
                value = {passWord}
                onChange={(e) =>{
                    this.valueChange("passWord", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '小程序账号密码',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: passWord,
                  }
                }}
              />
              <Select
                value = {status}
                onChange={(value) =>{
                    this.valueChange("status", value)
                }}
                disabled={modifyId? true: false}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '账号状态',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: status,
                  }
                }}
              >
                <Option value={0}>冻结</Option>
                <Option value={1}>正常</Option>
              </Select>
              <Select
                value = {loginType}
                onChange={(value) =>{
                    this.valueChange("loginType", value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '登录类型',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: loginType,
                  }
                }}
              >
                <Option value={1}>pc</Option>
                <Option value={2}>小程序</Option>
              </Select>
            </VtxModalList>
          </div>
        </VtxModal>
      </div>
    )
  }
}
export default Index